<template>
  <div class="container">
    <a-form
      :model="formState"
      class="container-form"
      layout="inline"
      @keyup.enter.native="handleSearch"
      @keyup.esc.native="handleReset"
    >
      <a-form-item label="项目名称">
        <a-input
          v-model:value="formState.name"
          allowClear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button
            type="primary"
            :loading="searchLoading"
            @click="handleSearch"
          >
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button
            :loading="resetLoading"
            @click="handleReset"
          >
            <template #icon>
              <RedoOutlined />
            </template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-row class="container-operate">
      <a-button
        type="primary"
        @click="handleAdd"
      >
        <template #icon>
          <PlusOutlined />
        </template>
        新增
      </a-button>
    </a-row>

    <a-table
      class="container-table"
      bordered
      rowKey="id"
      :scroll="{ x: 'max-content', y: tableScrollY }"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :pagination="pagination"
      @change="tableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'domesticUrl'">
          <a-typography-link
            :href="record.domesticUrl"
            target="_blank"
            copyable
            v-if="isLink(record.domesticUrl)"
          >
            {{ record.domesticUrl }}
          </a-typography-link>
        </template>
        <template v-if="column.key === 'abroadUrl'">
          <a-typography-link
            :href="record.abroadUrl"
            target="_blank"
            copyable
            :value='123'
            @input='input'
            v-model:value='123'
            v-if="isLink(record.abroadUrl)"
          >
            {{ record.abroadUrl }}
          </a-typography-link>
        </template>
        <template v-if="column.key === 'accountList'">
          <a-space
            class="account"
            v-if="record.accountList"
            direction="vertical"
          >
            <a-space-compact
              v-for="item in record.accountList"
              :key="item.username"
              block
            >
              <a-button
                type="text"
                class="account-btn"
              >
                <template #icon>
                  <UserOutlined />
                </template>
                <a-tooltip color="#fff">
                  <template #title>
                    <a-space-compact>
                      <a-button type="text">
                        {{ item.username }}
                      </a-button>
                      <a-button
                        type="text"
                        @click="handleCopyText(item.username)"
                      >
                        <template #icon>
                          <CopyOutlined />
                        </template>
                      </a-button>
                    </a-space-compact>
                  </template>
                  <span class="account-text ellipsis-1">
                    {{ item.username }}
                  </span>
                </a-tooltip>
              </a-button>
              <a-button
                type="text"
                class="account-btn"
              >
                <template #icon>
                  <LockOutlined />
                </template>
                <a-tooltip color="#fff">
                  <template #title>
                    <a-space-compact>
                      <a-button type="text">
                        {{ item.password }}
                      </a-button>
                      <a-button
                        type="text"
                        @click="handleCopyText(item.password)"
                      >
                        <template #icon>
                          <CopyOutlined />
                        </template>
                      </a-button>
                    </a-space-compact>
                  </template>
                  <span class="account-text ellipsis-1">
                    {{ item.password }}
                  </span>
                </a-tooltip>
              </a-button>
            </a-space-compact>
          </a-space>
          <template v-else>--</template>
        </template>
        <template v-if="column.key === 'dockingSystem'">
          <a-tag
            v-for="(item, index) in record.dockingSystem.split(',')"
            v-if="record.dockingSystem"
            :color="tagColor[index % 4]"
          >
            {{ item }}
          </a-tag>
          <template v-else>--</template>
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            type="link"
            @click="handleEdit(record)"
          >
            <template #icon>
              <EditOutlined />
            </template>
            编辑
          </a-button>
          <a-divider type="vertical" />
          <a-popconfirm
            placement="left"
            cancel-text="取消"
            ok-text="确认"
            title="确认删除？"
            @confirm="handleDelete(record)"
          >
            <a-button
              danger
              type="link"
            >
              <template #icon>
                <DeleteOutlined />
              </template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <deployModal
      ref="modal"
      @modalOk="handleReset"
    />
  </div>
</template>
<script setup>
import { useFormSearch, useTableList } from '@/hooks'
import { useClipboard } from '@vueuse/core'
import deployModal from './src/deployModal.vue'
import { Compact as ASpaceCompact, message } from 'ant-design-vue'
import Service from '@/utils/service.js'

const input = (e)=>{

}

const tagColor = ['#2db7f5', '#87d068', '#108ee9', '#f50']

const isLink = computed(() => {
  return link => link.startsWith('http')
})

const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'sort',
    width: 70,
    sorter: (a, b) => a.sort - b.sort,
  },
  {
    title: '项目名称',
    align: 'center',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '国内访问地址',
    align: 'center',
    dataIndex: 'domesticUrl',
    key: 'domesticUrl',
  },
  {
    title: '国外访问地址',
    align: 'center',
    dataIndex: 'abroadUrl',
    key: 'abroadUrl',
  },
  {
    title: '账号列表',
    align: 'center',
    dataIndex: 'accountList',
    key: 'accountList',
  },
  {
    title: '对接指令系统',
    align: 'center',
    dataIndex: 'dockingSystem',
    key: 'dockingSystem',
  },
  {
    title: '时区',
    align: 'center',
    dataIndex: 'timeZone',
    key: 'timeZone',
  },
  {
    title: '操作',
    align: 'center',
    key: 'action',
    fixed: 'right',
    width: 180,
  },
]

const { loading, dataSource, pagination, tableScrollY, getList, tableChange } = useTableList('/website/page')
const { formState, searchLoading, resetLoading, handleSearch, handleReset } = useFormSearch({ name: '' }, getList)
getList()

const source = ref('')
const { text, copy, copied } = useClipboard({ legacy: true })
const handleCopyText = text => {
  source.value = text
  copy(source.value)
}

watch(
  () => copied.value,
  e => {
    if (e) {
      message.success('复制成功')
    }
  }
)

const modal = ref()

const handleAdd = () => {
  modal.value.handleAdd()
}

const handleEdit = record => {
  modal.value.handleEdit(record)
}

const handleDelete = record => {
  return Service.deleteAction('/website/delete', {
    id: record.id,
  }).then(({ code, msg }) => {
    if (code === 200) {
      getList()
      message.success('删除成功！')
    } else {
      message.error(msg)
    }
  })
}
</script>
<style lang="scss" scoped>
.container {
  &-table {
    .account {
      padding: 0 10px;
      max-height: 80px;
      overflow: hidden auto;
    }

    .account-btn {
      display: flex;
      align-items: center;
      width: 100px;
      border-color: #d9d9d9;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
      border-style: dashed;
      padding: 0 5px;
    }

    .account-text {
      text-align: left;
      width: 68px;
    }
  }
}
</style>
